<template>
  <!-- 已知为解决BUG：
                1、上下级类别没有默认无类别选项
                2、上传图片无法覆盖
                3、筛选属性没有第二个选项框
                4、筛选属性的删除删不了
                5、筛选属性的传参有问题    
            -->
  <div class="box">
    <el-form :model="submitParams" :rules="rules" ref="formRef">
      <el-form-item label="&emsp;&emsp;&emsp;分类名称:" prop="name">
        <el-input v-model="submitParams.name"></el-input>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;上下级分类:">
        <el-select
          v-model="submitParams.parentId"
          placeholder="&emsp;&emsp;&emsp;&emsp;&emsp;请选择"
        >
          <el-option
            v-for="item in levelList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
            @change="submitParams.parentId = item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="&emsp;&emsp;&emsp;&emsp;数量单位:"
        prop="productUnit"
      >
        <el-input v-model="submitParams.productUnit"></el-input>
      </el-form-item>
      <el-form-item
        label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;排序:"
        prop="sort"
      >
        <el-input v-model="submitParams.sort"></el-input>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;&emsp;是否显示:">
        <el-radio-group v-model="submitParams.showStatus" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示在导航栏:">
        <el-radio-group v-model="submitParams.navStatus" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;&emsp;分类图标:">
        <el-upload
          class="upload-demo"
          action="http://127.0.0.1:5173/api/productCategory/list/minio/upload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="handleUpload"
          :limit="1"
          list-type="picture"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过100kb</div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;&emsp;筛选属性:">
        <el-select
          v-model="submitParams.productAttributeIdList[0]"
          placeholder="请选择"
        >
          <el-option
            v-for="item in withAttr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @change="submitParams.productAttributeIdList.push(item.id)"
          >
          </el-option>
        </el-select>
        <el-button>删除</el-button>
      </el-form-item>
      <el-form-item
        label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"
        v-for="item in selectNumList"
      >
        <el-select
          v-model="submitParams.productAttributeIdList"
          placeholder="请选择"
        >
          <el-option
            v-for="item in withAttr"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @change="submitParams.productAttributeIdList.push(item.id)"
          >
          </el-option>
        </el-select>
        <el-button @click="del">删除</el-button>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;">
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
      <el-form-item
        label="&emsp;&emsp;&emsp;&emsp;&emsp;关键词:"
        prop="keywords"
      >
        <el-input v-model="submitParams.keywords"></el-input>
      </el-form-item>
      <el-form-item
        label="&emsp;&emsp;&emsp;&emsp;分类描述:"
        prop="description"
      >
        <el-input v-model="submitParams.description"></el-input>
      </el-form-item>
      <el-form-item label="&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="reset" v-if="!route.query.id">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import {
  ElMessage,
  ElMessageBox,
  FormInstance,
  UploadFile,
  UploadFiles,
  UploadProps,
  UploadUserFile,
} from "element-plus";
import {
  productCategoryListApi,
  updateProductCategoryApi,
  productAttributeApi,
  getProductCategoryByIdApi,
  editProductCategoryApi,
} from "./api";
import { useRouter, useRoute } from "vue-router";

const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const levelList = ref<{ label: string; value: number }[]>([]);
const withAttr = ref<IProductAttributeModel[]>([]);
const selectNumList = ref<number[]>([]);
const formRef = ref<FormInstance>();
const router = useRouter();
const route = useRoute();
const submitParams: IUpdateProductCategoryModel = reactive({
  name: "",
  parentId: 0,
  sort: 0,
  showStatus: 0,
  navStatus: 0,
  icon: "",
  productAttributeIdList: [0],
  keywords: "",
  description: "",
  productUnit: "",
});
const rules = {
  name: [{ required: true, message: "请填写名称", trigger: "blur" }],
  productUnit: [{ required: false, message: "", trigger: "blur" }],
  sort: [{ required: false, message: "", trigger: "blur" }],
  keywords: [{ required: false, message: "", trigger: "blur" }],
  description: [{ required: false, message: "", trigger: "blur" }],
};
//获取全部上下级分类
const listParams: IProductCategoryParamsModel = reactive({
  parentId: 0,
  pageNum: 1,
  pageSize: 10,
});
productCategoryListApi(listParams).then((res) => {
  if (res.code === 200) {
    levelList.value = res.data.list.map((item) => ({
      label: item.name,
      value: item.id,
    }));
  }
});
//所有商品属性分类及其下属性(筛选属性的内容)
productAttributeApi().then((res) => {
  if (res.code === 200) {
    withAttr.value = res.data;
  }
});

const add = () => {
  if (selectNumList.value.length === 2) {
    ElMessage.warning("最多添加三个");
    return;
  }
  selectNumList.value.push(1);
};
const del = () => {
  selectNumList.value.shift;
};
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const submit = () => {
  if (route.query.id) {
    ElMessageBox.confirm("是否提交数据", "提交", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        editProductCategoryApi(Number(route.query.id), submitParams).then(
          (res) => {
            if (res.code === 200) {
              ElMessage.success("修改成功");
            }
          }
        );
      })
      .catch(() => {});
  } else {
    ElMessageBox.confirm("是否提交数据", "提交", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        updateProductCategoryApi(submitParams).then((res) => {
          if (res.code === 200) {
            ElMessage.success("提交成功");
          }
        });
      })
      .catch(() => {});
  }
};
const reset = () => {
  formRef.value?.resetFields();
};
const handlePreview: UploadProps["onPreview"] = (file) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};
const handleUpload = (
  response: any,
  uploadFile: UploadFile,
  uploadFiles: UploadFiles
) => {
  submitParams.icon = uploadFile.url as string;
};

watch(
  () => route.query.id,
  () => {
    if (route.query.id) {
      getProductCategoryByIdApi(Number(route.query.id)).then((res) => {
        if (res.code === 200) {
          Object.assign(submitParams, res.data);
        }
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.box {
  width: 720px;
  padding: 35px 35px 15px 35px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  position: absolute;
  left: 0;
  right: 0;
  margin: 20px auto;
}
</style>
